<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>僵尸图鉴</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/corpse.css">
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/axios.js"></script>

</head>

<body>
    <div id="app" style="width: 80%;margin-left: 10%;">
        <el-container>
            <!-- 头部 -->
            <el-header>
                <div class="line"></div>
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1" style="margin-left: 20px;float:right">登录</el-menu-item>
                    <el-menu-item index="2" style="margin-left: 20px;float:right">注册</el-menu-item>
                </el-menu>
            </el-header>
            <!-- 海报 -->
            <el-main>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <div class="poster"></div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
            <el-row>
                <el-col :span="24">
                    <!-- 菜单栏 -->
                    <el-header class="nav">
                        <div class="line"></div>
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                            <el-menu-item index="1" style="margin-right: 8%;">植物图鉴</el-menu-item>
                            <el-menu-item index="2" style="margin-right: 8%;">僵尸图片</el-menu-item>
                            <el-menu-item index="3" style="margin-right: 8%;"><a href="https://www.ele.me" target="_blank">游戏攻略</a></el-menu-item>
                            <el-menu-item index="4" style="margin-right: 8%;">游戏介绍</el-menu-item>
                            <el-menu-item index="4" style="margin-right: 8%;">衍生周边</el-menu-item>
                            <el-menu-item index="6" style="margin-right: 8%;">搜索</el-menu-item>

                        </el-menu>

                    </el-header>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                </el-col>
                <el-col :span="8">
                    <!-- 介绍 -->

                    <div class="introduce">
                        本百科正在建设中，你可以加入我们，与我们一同收集植物大战僵尸的方方面面，共同完善本百科！
                    </div>

                </el-col>
            </el-row>
            <!-- 图鉴 -->
            <el-header class="atlas" style="margin-left: 10%;">
                <img :src="tj" alt="">
                <div style="text-indent: 2em; text-align: left;">{{data_list}}</div>
            </el-header>
            <el-row>
                <el-col :span="16">
                    <!-- 内容区 -->
                    <el-main class="content">
                        <!-- 属性简介展示 -->
                        <el-row :gutter="1">
                            <!-- 第一行 -->
                            <el-col :span="8">
                                <div class="grid-content bg-purple show-profile">图片</div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content bg-purple show-profile">攻击</div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content bg-purple show-profile">血量</div>
                            </el-col>

                            <!-- 第二行 -->
                            <div id="plants" v-for="plant in filterPlants">
                                <el-col :span="8">
                                    <div class="grid-content bg-purple show-profile2">
                                        <div style="margin: 0 auto; text-align: center;">
                                            <img class="img-container" :src='"http://localhost:8080/zombie/img/"+plant.zid' alt="" @click="test(plant.zid)">
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple show-profile2">{{plant.atk}}</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple show-profile2">{{plant.hp}}</div>
                                </el-col>

                            </div>

                        </el-row>
                    </el-main>
                </el-col>

                <el-col :span="8">
                    <!-- 热门帖子 -->

                    <div popula-posts style="margin-left: 55%;">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>热门论坛</span>
                                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                            </div>
                            <div>
                                热点一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br> 热点二&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
                                <br> 热点二&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
                                <br>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>



        </el-container>



    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            value: true,
            textarea1: '',
            textarea2: '',
            activeIndex: '1',
            activeIndex2: '1',
            filterButtons: [],
            filterPlants: [],
            plants: [],
            env: null,
            tj: null,
            data_list: null,

        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            test(id) {
                this.tj = "http://localhost:8080/zombie/img/" + id;

            },
            test(id) {
                this.tj = "http://localhost:8080/zombie/img/" + id;
                switch (id) {
                    case 1:
                        this.data_list =
                            "平凡的普通僵尸强度：这种僵尸热爱脑子，不懂知足，没日没夜地追求着脑子、脑子、脑子。又旧又臭的脑子？腐烂的脑子？明显过期了的脑子？没关系，普通僵尸会想要的。"
                        break;
                    case 2:
                        this.data_list =
                            "旗帜僵尸标志着一大堆、或者说一大“波”僵尸的抵达。强度：要知道，旗帜僵尸热爱脑子，但不知怎么着他也迷恋着旗帜。也许是因为旗子上总是画着脑子吧，难说。"
                        break;
                    case 3:
                        this.data_list =
                            "他的交通锥头盔使他有普通僵尸的两倍那么强壮。强度和其他僵尸一样，交通锥僵尸无意识地向前挪动。但某些事物却使他停下脚步，让他捡起个交通锥并卡在自己的头上。是啊，他喜欢参加聚会。"
                        break;
                    case 4:
                        this.data_list =
                            "撑杆跳僵尸能用杆子撑杆跳。强度：速度：快，而后中（跳跃后特殊：跳过他跑向的第一株一些僵尸渴望走得更远、实现更多，这也促使他们超越普通变得伟大。这就是撑杆跳僵尸，他就是这样。"
                        break;
                    case 5:
                        this.data_list =
                            "他的铁桶帽子使他极其能抵挡伤害。 铁桶僵尸总是戴着桶，部分原因是为了宣扬自己在这冷漠的世界中独一无二，而主要来说他衹是忘记了那桶还戴在他头上而已"
                        break;
                    case 6:
                        this.data_list =
                            "他的报纸只能提供有限的防御。强度：报纸强度：速度：中，而后快（失去报纸报纸僵尸离完成他的数独谜题只差 * 这么 * 一点，难怪他反应这么强烈。"
                        break;
                    case 7:
                        this.data_list =
                            "他的纱门是有效的盾牌。强度：纱门强度：弱点：烟雾蘑菇、磁铁蘑他上次拜访的那位房主防守并不熟练，吃掉那人的脑子后拿走了他家的纱门。"
                        break;
                    case 8:
                        this.data_list =
                            "橄榄球僵尸将带来一场精彩比赛。强度：极速度：弱点：磁铁在球场上，橄榄球僵尸表现出十一成的激情。他善于与队友合作，进攻防守样样在行，虽然他完全不知道橄榄球是什么。"
                        break;

                    case 9:
                        this.data_list =
                            "舞者僵尸和任何人（在世或离世）间的任何相似纯属巧合。强度：特殊：召唤伴舞舞者僵尸的最新专辑“抓脑子撒哺啦哺”在不死族界排行榜上飙升。"
                        break;
                    case 10:
                        this.data_list = "伴舞僵尸这些僵尸会在舞王僵尸劲舞时四只成群登场强度：伴舞僵尸曾经在位于僵尸新约克城的咀利牙表演艺术学院对舞技精益求精六年。"
                        break;
                    case 11:
                        this.data_list = "鸭子救生圈使这种僵尸能浮在水面上。强度：只在泳池中只有特定的僵尸才能成为鸭子救生圈僵尸，不是每只僵尸都能胜任。有些救生圈有点漏气，他们却处理不了，脱身后永远放弃了对脑子的渴求。"
                        break;
                    case 12:
                        this.data_list = "潜水僵尸可以潜泳。强度：特殊：潜水以避免遭到攻只在泳池中僵尸不呼吸，他们不需要空气，那么为什么潜水僵尸还需要用呼吸管来潜泳呢？答案：同行的压力。"
                        break;
                    case 13:
                        this.data_list = "僵尸洗冰车向你的植物施加冰雪、蒸汽、压力。强度：特殊：碾压植物，留下人们经常误以为这是驾驶着造冰车的僵尸，但事实上僵尸洗冰车是种完全不同的生物，他与太空食人魔的联系比与僵尸更紧密。"
                        break;
                    case 14:
                        this.data_list = "这些僵尸会四只成队出现。强度：弱（每只僵尸雪橇强度：特殊：只在冰道上僵尸雪橇小队努力成为了如今的他们。他们一起生活、分享脑子、共同训练，从而成为一支合作无间的僵尸小队。"
                        break;
                    case 15:
                        this.data_list = "海豚骑手僵尸能用海豚利用你泳池防御中的弱点。强度：速度：快，而后慢（跳跃后特殊：跃过他冲向的第一株植只在泳池中那海豚也是僵尸。"
                        break;
                    case 16:
                        this.data_list = "这种僵尸拿着一个会每炸的食子。手拿潘多控盒子的僵尸，生命力中等，移动速度快，特技是手中酌盒子有一定几车旨塌(越靠左几率越高，正常不能"
                        break;
                    case 17:
                        this.data_list = "气球僵尸能飘在战斗之上，躲过绝大部分攻击。强度：特殊：飞弱点：仙人掌、三气球僵尸真走运。气球真的很有效，而其他僵尸都不曾意识到。"
                        break;
                    case 18:
                        this.data_list = "这种僵尸通过控地桌经过防线。矿工变喉的僵P，生命力中等，挖地差时移动速度快，巴涵移动透度很懂，特技是控地著,挖到底后台硬直3秒，然后转回去吃掉―亲路所有的植物，如案挖地徽时工具楂磁犊吸走，则会立刻钻出地面正常的版右向左吃过去，该情况下僵尸出土不会硬直"
                        break;
                    case 19:
                        this.data_list = "蹦蹦僵尸可以蹦过你的防御。强度：特殊：蹦过植弱点：磁铁嘣！嘣！嘣！那声音是只强大而有效的僵尸在做他最擅长的事。"
                        break;
                    case 20:
                        this.data_list = "此类僵尸很少现身，而且往往会在片刻之后即跑掉。生命力高，一周目中不会出现，在二周目及以后的4-10关中出现，之后几乎任何地方都可能出现。"
                        break;
                    case 21:
                        this.data_list = "蹦极僵尸从天上攻击，顾名思义就是蹦极跳的僵尸，生命力中等，特技是抓走掉落点的物体( 可无祝南瓜套,优先抓取南瓜保护的植物)"
                        break;
                    case 22:
                        this.data_list = "梯子僵尸可以爬过障碍物。强度：梯子强度：速度：快，而后弱点：烟雾蘑菇、磁铁这架梯子只花了他八块九毛九。"
                        break;
                    case 23:
                        this.data_list = "投石车僵尸操作着重型机械。强度：特殊：向你的植物投掷投石车僵尸可以用投石车来发射的所有东西中，篮球似乎是最佳选择，也是最没有创意的选择。"
                        break;
                    case 24:
                        this.data_list = "巨人僵尸是一种巨型僵尸。强度：巨人僵尸走动的时候，大地都在震颤。他悲叹的时候，其他僵尸都沉默下来。他是其他僵尸梦想成为的那种僵尸，然而他还是找不到女朋友。"
                        break;
                    case 25:
                        this.data_list = "小鬼僵尸是一种小型僵尸，巨人僵尸会将他们投掷进你的防御中。强度小鬼僵尸也许很小，但是他很结实。他精通僵尸柔道、僵尸空手道、僵尸徒手斗殴。此外，他还会吹口琴。"
                        break;
                    case 26:
                        this.data_list = "僵尸巨怪是一种巨型僵尸强度:极高他在僵尸大本营中就是霸者的存在,甚至连他们自己人,都会躲着他绕道面行"
                        break;
                    case 27:
                        this.data_list = "僵王博士统治著全部僵尸。强度（受僵尸机器人保护）：埃德加·乔治·僵王只用了两年就获得了死亡学博士学位。迅速精通了死亡学科技后，他制造了他那望而生畏的僵尸机器人，着手确立当地的绝对支配地位。"
                        break;
                }
            }
        },
        created() {
            // 为给定 ID 的 user 创建请求
            axios.get('http://localhost:8080/zombie/zombies')
                .then(({
                    data
                }) => {
                    console.log(data);
                    this.plants = data.data;
                    this.filterPlants = data.data;
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    })
</script>

</html>